<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.18-rc.1/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item" id="queue-history">
            <div class="layui-colla-title">指令队列</div>
            <div class="layui-colla-content ">

                <div class="layui-collapse" lay-accordion>
                    <div class="layui-colla-item">

                        <!-- 指令标题 -->
                        <div class="layui-colla-title queue-history" data-mainid="">
                            <span>
                                <span></span>
                                <span data-description="history-queue-id"></span>
                            </span>
                            <span>
                                <span>时间:</span>
                                <span data-description="history-queue-time">20231021</span>
                            </span>
                            <span class="history-queue-mainstate history-queue-mainstate-finished">
                                <i class="layui-icon layui-icon-success" style="font-size:24px;color:green"></i>
                            </span>

                        </div>
                        <!-- 指令内容 -->
                        <div class="layui-colla-content history-queue-content-box">
                            <!-- 地点 -->
                            <ul class="history-queue-content">
                                <li class="history-queue-content-item history-queue-state-finished"
                                    data-itemstate="finished">F11room01_05</li>
                                <li class="history-queue-content-item history-queue-state-finished"
                                    data-itemstate="finished">F11room06_10</li>
                                <li class="history-queue-content-item history-queue-state-unfinished"
                                    data-itemstate="unfinished">F11room11_16</li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.8.18-rc.1/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;
            util.on('lay-on', {
                'test-offset-t': function () {
                    layer.open({
                        type: 1,
                        offset: 't',
                        anim: 'slideDown', // 从上往下
                        area: ['100%', '160px'],
                        shade: 0.1,
                        shadeClose: true,
                        id: 'ID-demo-layer-direction-t',
                        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
                    });
                },
                'test-offset-r': function () {
                    layer.open({
                        type: 1,
                        offset: 'r',
                        anim: 'slideLeft', // 从右往左
                        area: ['320px', '100%'],
                        shade: 0.1,
                        shadeClose: true,
                        id: 'ID-demo-layer-direction-r',
                        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
                    });
                },
                'test-offset-b': function () {
                    layer.open({
                        type: 1,
                        offset: 'b',
                        anim: 'slideUp', // 从下往上
                        area: ['100%', '160px'],
                        shade: 0.1,
                        shadeClose: true,
                        id: 'ID-demo-layer-direction-b',
                        content: '<div style="padding: 16px;">任意 HTML 内容</div>'
                    });
                },
                'test-offset-l': function () {
                    layer.open({
                        type: 1,
                        title: '历史记录',
                        offset: 'l',
                        anim: 'slideRight', // 从左往右
                        area: [UIWidth, '100%'],
                        shade: 0.1,
                        shadeClose: true,
                        id: 'Layer-Left-History',
                        content: ''
                    });
                    layui.element.render();
                    // 在这里添加你的监听事件
                    var queueHistory = document.querySelectorAll(".queue-history");
                    console.log(queueHistory);
                    //遍历并添加监听事件
                    for (var i = 0; i < queueHistory.length; i++) {
                        queueHistory[i].addEventListener("click", function () {

                            //判断是否隐藏
                            if (this.nextElementSibling.style.display == "block") {
                                console.log("隐藏");
                                this.nextElementSibling.style.display = "none";
                                //清除地图上的所有标记
                                mapClearAll();
                            } else {
                                console.log("显示");
                                this.nextElementSibling.style.display = "block";
                                //清空发送台
                                removeActive1();
                                //根据id从后端数据库获取地图数据并连线
                                //获取id
                                var mainId = this.getAttribute("data-mainid");
                                console.log("mainId:" + mainId);
                                //根据id获取数据

                            }
                        });
                    }
                }
            });
        })
    </script>

</body>

</html>